<template>
<div v-infinite-scroll="load"
    :infinite-scroll-immediate="false"
    :infinite-scroll-distance=200
    :infinite-scroll-disabled="isFirstLoadComment || !isHasMoreComment || isLoadingComment"
>
    <!-- 头部 -->
    <header class="header">
        <div class="header-content">
            <a href="#" @click="GoBack()" class="back-btn">
                <svg t="1751614585251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" 
                    p-id="1471" width="20" height="20">
                    <path d="M790.865959 73.216062 322.123178 512.062492l468.74278 438.746442c16.397998 16.697962 16.397998 43.894642 0 60.592603-16.397998 16.697962-42.894764 16.697962-59.292762 0l-498.839107-466.943c-8.698938-8.898914-12.398487-20.797461-11.898548-32.496033-0.599927-11.698572 3.099622-23.497132 11.898548-32.496033l498.839107-466.943c16.397998-16.697962 42.894764-16.697962 59.292762 0C807.263957 29.421409 807.263957 56.518101 790.865959 73.216062z" 
                        fill="#272636" 
                        p-id="1472">
                    </path>
                </svg>
            </a>
            <div class="header-title">帖子详情</div>
            <div class="header-actions">
                <a href="#" class="action-btn">⋯</a>
            </div>
        </div>
    </header>

    <!--内容区-->
    <main class="main-content">
        <!-- 帖子详情 -->
        <div class="post-detail">
            <!--头部区域-->
            <div class="post-header">
                <div class="author-info">
                    <div @click="goUserProfile(userInfo.id)" class="author-avatar" :style="{ backgroundImage: userInfo.avatarUrl ? `url(${userInfo.avatarUrl})` : '' }">
                        {{ userInfo?.avatarUrl ? '' : userInfo?.username?.charAt(0) }}
                    </div>
                    <div class="author-details">
                        <div class="author-name">{{ userInfo.username }}</div>
                        <div class="post-time">{{ postInfo?.createTime ? formatTime(postInfo.createTime) : '' }}</div>
                    </div>

                    <div v-if="userInfo.id && userInfo.id != -1" >
                        <button v-if="currentUserIsAuthor==false && isFollowed==false" class="follow-btn" @click="followUser(userInfo.id, true)">关注</button>
                        <button v-else-if="currentUserIsAuthor==false && isFollowed==true" class="follow-btn followed" @click="followUser(userInfo.id, false)">已关注</button>
                        <button v-else class="follow-btn" @click="isShowPopup=true">编辑</button>
                    </div>
                </div>
                <div class="post-title">{{ postInfo.title }}</div>
            </div>
            
            <!--轮播图-->
            <van-swipe v-if="postInfo.imageUrlList && postInfo.imageUrlList.length > 0" class="post-swipe" lazy-render
                @touchstart="handleTouchStart" 
                @touchend="handleTouchEnd">
                <van-swipe-item v-for="(image,index) in postInfo.imageUrlList" :key="image">
                    <img :src="image" @click="handleImageClick(postInfo.imageUrlList, index)" @dragstart.prevent class="swipe-image" />
                </van-swipe-item>
            </van-swipe>

            <!-- 测试图片显示用 -->
            <!-- <van-swipe v-else class="post-swipe" lazy-render
                @touchstart="handleTouchStart" 
                @touchend="handleTouchEnd">
                <van-swipe-item v-for="(image,index) in imageUrlList" :key="image">
                    <img :src="image" @click="handleImageClick(imageUrlList, index)" @dragstart.prevent class="swipe-image" />
                </van-swipe-item>
            </van-swipe> -->

            <!--帖子内容-->
            <div class="post-content">
                <!--内容区域-->
                <div class="post-text" v-html="postInfo.content?.replace(/(\r\n|\n|\r)/gm, '<br />')"></div>
                
                <!-- 话题区域 -->
                <div class="post-topics" v-if="topicObjectList && topicObjectList.length > 0">
                    <div class="topics-list">
                        <span class="topic" v-for="topic in topicObjectList" :key="topic.id">
                            # {{ topic.name }}
                        </span>
                    </div>
                </div>
                
                <!-- 标签区域 -->
                <div class="post-tags">
                    <div class="tags-list">
                        <span class="tag" v-for="tag in tagsObjectList" :key="tag.id">
                            {{ tag.name }}
                        </span>
                    </div>
                </div>
            </div>
            
            <!--帖子操作-->
            <div class="post-stats">   
                <div class="stats-left"></div>
                
                <div class="action-buttons">
                    <div @click="likePost(postInfo.id)" class="action-btn-large" :class="{ liked: postInfo.liked }">
                        <span>❤️</span>
                        <span>{{ formatNumber(postInfo.likesCount)}}</span>
                    </div>
                    <div class="action-btn-large">
                        <span>💬</span>
                        <span>{{ formatNumber(postInfo.commentsCount)}}</span>
                    </div>
                    <div @click="collectPost(postInfo.id)" class="action-btn-large" :class="{ collected: postInfo.collected }">
                        <span>⭐</span>
                        <span>{{ formatNumber(postInfo.favoriteCount)}}</span>
                    </div>
                    <!-- <div class="action-btn-large">
                        <span>📤</span>
                    </div> -->
                </div>
            </div>
        </div>
        
        <!--评论区-->
        <div class="comments-section" v-loading="isLoadingCommentPart">
            <!--评论区头部-->
            <div class="comments-header">
                <span>评论 ({{ totalCount_comment }})</span>
                <div class="comment-sort-toggle" v-if="commentInfo?.length > 0">
                    <span class="sort-option" :class="{ active: commentSortType === CommentConstant.SORT_DEFAULT }" @click="toggleCommentSort(CommentConstant.SORT_DEFAULT)">默认</span>
                    <span class="sort-divider">|</span>
                    <span class="sort-option" :class="{ active: commentSortType === CommentConstant.SORT_LATEST }" @click="toggleCommentSort(CommentConstant.SORT_LATEST)">最新</span>
                </div>
            </div>

            <!--评论主要内容区-->
            <div class="comment" v-if="!isLoadingCommentPart" v-for="comment in commentInfo" :key="comment.id">
                <!--评论信息-->
                <div class="comment-author">
                    <div class="comment-avatar" :style="{ backgroundImage: comment.userAvatarUrl ? `url(${comment.userAvatarUrl})` : '' }"></div>
                    <div class="comment-name">{{ comment.username }}</div>
                    <div class="comment-time">{{ formatTime(comment.createTime) }}</div>
                </div>
                <div class="comment-text">{{ comment.content }}</div>

                <!--评论操作-->
                <div class="comment-actions">
                    <div class="comment-action" @click="likeComment(comment)" :class="{ liked: comment.isLiked }">
                        <span>{{ comment.isLiked ? '❤️' : '🤍' }}</span>
                        <span>{{ comment.likesCount }}</span>
                    </div>
                    <div class="comment-action" @click="handleClickReply(comment, commentLevel.level2, comment.id)">回复</div>
                    <div v-if="comment.childrenComments && comment.childrenComments.length > 0 && comment.showReplies==false" 
                        class="comment-action" @click="toggleReplies(comment.id)">
                        展开&thinsp;{{ comment.repliesCount }}&thinsp;条回复
                    </div>
                    <div v-else-if="comment.showReplies==true" class="comment-action" @click="toggleReplies(comment.id)">收起</div>

                    <!--评论更多操作选择-->
                    <el-popover v-if="user_Store.userInfo?.id == comment.userId"
                        class="" title="" content="" trigger="click" placement="top-end">
                        <template #reference>
                            <div class="comment-ellipsis"><van-icon name="ellipsis" /></div>
                        </template>
                        <el-button style="width: 100%;" @click="handelClickDelComment(comment)">删除评论</el-button>
                    </el-popover>
                </div>
                
                <!-- 回复列表 -->
                <div class="replies-section" v-if="comment.showReplies && comment.childrenComments?.length">
                    <div class="reply" v-for="reply in comment.childrenComments" :key="reply.id">
                        <!--回复信息-->
                        <div class="reply-author">
                            <div class="reply-avatar" :style="{ backgroundImage: reply.userAvatarUrl ? `url(${reply.userAvatarUrl})` : '' }"></div>
                            <div class="reply-name">{{ reply.username }}</div>
                            <div class="reply-time">{{ formatTime(reply.createTime) }}</div>
                        </div>
                        <div class="reply-text">
                            <span class="reply-to" v-if="reply.replyId">回复 {{ reply.replyUsername }}:</span>
                            {{ reply.content }}
                        </div>

                        <!--回复操作-->
                        <div class="reply-actions">
                            <div class="reply-action" :class="{ liked: reply.isLiked }" @click="likeComment(reply)">
                                <span>{{ reply.isLiked ? '❤️' : '🤍' }}</span>
                                <span>{{ reply.likesCount }}</span>
                            </div>
                            <div class="reply-action" @click="handleClickReply(reply, commentLevel.level2, comment.id, reply.id)">回复</div>

                            <!--评论更多操作选择-->
                            <el-popover v-if="user_Store.userInfo?.id == reply.userId"
                                class="" title="" content="" trigger="click" placement="top-end">
                                <template #reference>
                                    <div class="comment-ellipsis"><van-icon name="ellipsis" /></div>
                                </template>
                                <el-button style="width: 100%;" @click="handelClickDelComment(reply)">删除评论</el-button>
                            </el-popover>
                        </div>
                    </div>
                </div>
                <div class="more-replies" v-if="comment.showReplies && comment.childrenComments?.length && comment.isHasMoreReply && comment.isLoadingReply==false" 
                    @click="getMoreReplies(postId, comment.id, comment.repliesPage+1)">展开更多回复
                </div>
                <van-loading v-else-if="comment.showReplies && comment.childrenComments?.length && comment.isHasMoreReply && comment.isLoadingReply==true" 
                    size="12px" text-size="12px" style="margin-left: 70px;">加载中...
                </van-loading>
            </div>

            <!--骨架屏-->
            <div class="comment" v-else v-for="(item,index) in [1,2,3,4,5,6]" :key="index">
                <el-skeleton animated style="--el-skeleton-circle-size: 32px">
                    <template #template>
                        <div style="display: flex;align-items: center;margin-bottom: 8px;">
                            <el-skeleton-item variant="circle" />
                            <el-skeleton-item variant="text" style="width: 20%; margin-left: 10px" />
                        </div>
                        <el-skeleton-item variant="text" style="width: 50%; margin-left: 42px" />
                    </template>
                </el-skeleton>
            </div>
        </div>

        <div v-if="isHasMoreComment && !isLoadingCommentPart" style="height: 40px;display: flex;justify-content: center;font-size: 12px;color: #61666D;">
            正在努力加载中...
        </div>
        <div v-else-if="!isHasMoreComment && !isLoadingCommentPart" style="height: 40px;display: flex;justify-content: center;font-size: 12px;color: #61666D;">
            暂无更多评论
        </div>


        <!-- 底部占位盒子 -->
        <div class="bottom-bar"></div>
    </main>

    <!--评论输入框-->
    <div class="bottom-input" :class="{'reply-mode': commentAddDTO.replyUsername || isInputFocused}">
        <!--输入框容器-->
        <div class="input-container">
            <div v-if="commentAddDTO.replyUsername" class="reply-tag">
                回复 @{{commentAddDTO.replyUsername}}
            </div>
            <el-input ref="commentInput" v-model="commentAddDTO.content" style="width: 100%" 
                @focus="isInputFocused = true"
                :rows="1" type="textarea" resize="none" :autosize="{ minRows: 1, maxRows: 5 }" maxlength="500" :show-word-limit="isInputFocused"
                :placeholder="inputPlaceholder=='' ? '写下你的评论...' : inputPlaceholder"
            />
        </div>

        <!--按钮容器-->
        <div class="button-container">
            <button class="send-btn" :disabled="isSendingComment || !commentAddDTO.content" @click="sendComment()">发送</button>
            <button class="cancel-btn" @click="cancelReply()">取消</button>
        </div>
    </div>

    <!--弹出框-->
    <van-popup v-model:show="isShowPopup" closeable position="bottom" :style="{ height: '20%' }" style="display: flex;">
        <div class="popup-content">
            <div class="popup-btn" @click="handelEditClick(postInfo.id)">
                <svg t="1754290815062" class="popup-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6162" width="50" height="50">
                    <path d="M986.524021 342.070953a36.369549 36.369549 0 0 0-36.369549 36.369549V853.517738A99.447986 99.447986 0 0 1 852.411308 950.692627H170.482262A99.447986 99.447986 0 0 1 73.307373 853.517738V171.588692A99.447986 99.447986 0 0 1 170.482262 74.413802h475.077236a36.369549 36.369549 0 1 0 0-73.307372H170.482262a170.482262 170.482262 0 0 0-170.482262 170.482262v681.929046a170.482262 170.482262 0 0 0 170.482262 170.482262h681.929046a170.482262 170.482262 0 0 0 170.482262-170.482262V376.73568a36.369549 36.369549 0 0 0-36.369549-34.664727z" 
                        p-id="6163" fill="#959595">
                    </path>
                    <path d="M388.529074 582.450942L960.383408 10.028335a34.096452 34.096452 0 0 1 48.24648 0l3.977919 3.977919a33.528178 33.528178 0 0 1 0.056827 47.450897L440.412509 634.27755a34.096452 34.096452 0 0 1-48.303307 0l-3.182336-3.182336a34.096452 34.096452 0 0 1-0.397792-48.587444z" 
                        p-id="6164" fill="#959595">
                    </path>
                </svg>
                <span class="popup-btn-text">编辑</span>
            </div>
            <div class="popup-btn" @click="handelPermissionClick()">
                <svg t="1754291349622" class="popup-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7997" width="50" height="50">
                    <path d="M798.6 321.4c-0.2-122.8-87.3-228.2-207.9-251.5C470.3 46.5 350.1 111.7 304 225.5s-5.1 244.3 97.7 311.3c2.1 1.2 3.5 3.4 3.5 5.9 0 2.4-1.3 4.7-3.5 5.9-74.7 27.2-140.1 75.3-188.2 138.6-53.4 70.5-82.2 156.5-81.9 244.9 0 15.5 12.6 28.1 28.1 28.1 15.5 0 28.1-12.6 28.1-28.1-0.5-194.4 156.5-352.6 351-353.5h5.3c140.5-2.3 253.3-116.5 253.9-257l0.6-0.2zM542.2 522.5c-95.5 0.6-178.1-66.5-197.2-160.1-19.1-93.6 30.7-187.7 118.9-224.5 88.1-36.8 190-6.2 243.3 73.1 53.2 79.3 42.9 185.2-24.6 252.8-37.2 37.5-87.7 58.6-140.4 58.7z m361.9 226.4H878v-60.6c1.9-34-15.2-66.3-44.4-83.9a91.884 91.884 0 0 0-94.9 0c-29.2 17.6-46.3 49.9-44.4 83.9v60.6h-26.1c-12.6 0-22.7 10.2-22.7 22.7v165.8c0 12.6 10.2 22.7 22.7 22.7h235.9c12.5 0 22.7-10.2 22.7-22.7V771.6c0-12.5-10.1-22.7-22.7-22.7z m-101.5 117v46.6c0 1-0.4 2-1.2 2.8-0.7 0.7-1.7 1.2-2.8 1.2h-24.1c-1 0-2-0.4-2.8-1.2-0.7-0.7-1.1-1.7-1.1-2.8v-46.6c-15.1-7.6-23-24.6-19.1-41 3.9-16.4 18.6-28 35.5-28s31.6 11.6 35.5 28c3.9 16.4-4 33.4-19.1 41h-0.8z m40.1-117H730.5V690c0-31 25.1-56.1 56.1-56.1s56.1 25.1 56.1 56.1v58.9z m0 0" 
                        p-id="7998" fill="#959595">
                    </path>
                </svg>
                <span class="popup-btn-text">权限设置</span>
            </div>
            <div class="popup-btn" @click="handelDelClick(postInfo.id)">
                <svg t="1754291559568" class="popup-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10664" width="50" height="50">
                    <path d="M739.328 915.968H284.672c-40.448 0-73.216-32.768-73.216-73.216V276.48c0-16.384 13.312-29.184 29.184-29.184s29.184 13.312 29.184 29.184v566.272c0 8.192 6.656 14.848 14.848 14.848h454.144c8.192 0 14.848-6.656 14.848-14.848V276.48c0-16.384 13.312-29.184 29.184-29.184s29.184 13.312 29.184 29.184v566.272c0.512 40.448-32.768 73.216-72.704 73.216z" 
                        p-id="10665" fill="#959595">
                    </path>
                    <path d="M871.936 283.648H152.064c-16.384 0-29.184-13.312-29.184-29.184 0-16.384 13.312-29.184 29.184-29.184h720.384c16.384 0 29.184 13.312 29.184 29.184 0 15.872-13.312 29.184-29.696 29.184zM434.688 784.384c-16.384 0-29.184-13.312-29.184-29.184V374.272c0-16.384 13.312-29.184 29.184-29.184s29.184 13.312 29.184 29.184V755.2c0 15.872-13.312 29.184-29.184 29.184zM607.744 784.384c-16.384 0-29.184-13.312-29.184-29.184V374.272c0-16.384 13.312-29.184 29.184-29.184s29.184 13.312 29.184 29.184V755.2c0.512 15.872-12.8 29.184-29.184 29.184zM570.368 166.4H453.632c-16.384 0-29.184-13.312-29.184-29.184s13.312-29.184 29.184-29.184H570.88c16.384 0 29.184 13.312 29.184 29.184S586.752 166.4 570.368 166.4z" 
                        p-id="10666" fill="#959595">
                    </path>
                </svg>
                <span class="popup-btn-text">删除</span>
            </div>
        </div>
    </van-popup>

    <!--弹出框（权限设置）-->
    <van-popup v-model:show="isShowPopup_permission" closeable position="bottom" :style="{ height: '40%' }">
        <div>
            <div style="height: 50px;"></div>
            <div class="popup-cell-box_permission">
                <van-cell-group inset style="min-height: 88px;">
                    <van-cell class="popup-cell" value="" @click="updatePostVisible(1)">
                        <template #title>
                            <div class="popup-cell-title-box">
                                <img src="/src/assets/svg/unlock.svg" alt="" width="16" height="16">
                                <span class="custom-title">公开可见</span>
                            </div>
                        </template>
                        <template #right-icon>
                            <svg v-if="postInfo.privacy == 1" t="1755157923446" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9587" width="20" height="20">
                                <path d="M455.42 731.04c-8.85 0-17.75-3.05-24.99-9.27L235.14 553.91c-16.06-13.81-17.89-38.03-4.09-54.09 13.81-16.06 38.03-17.89 54.09-4.09l195.29 167.86c16.06 13.81 17.89 38.03 4.09 54.09-7.58 8.83-18.31 13.36-29.1 13.36z" p-id="9588" fill="#fb533e"></path><path d="M469.89 731.04c-8.51 0-17.07-2.82-24.18-8.6-16.43-13.37-18.92-37.53-5.55-53.96L734.1 307.11c13.37-16.44 37.53-18.92 53.96-5.55 16.43 13.37 18.92 37.53 5.55 53.96L499.67 716.89c-7.58 9.31-18.64 14.15-29.78 14.15z" 
                                    p-id="9589" fill="#fb533e">
                                </path>
                            </svg>
                        </template>
                    </van-cell>
                    <van-cell class="popup-cell" value="" is-link>
                        <template #title>
                            <div class="popup-cell-title-box">
                                <img src="/src/assets/svg/personnelLock.svg" alt="" width="16" height="16">
                                <span class="custom-title">不给谁看</span>
                            </div>
                        </template>
                    </van-cell>
                </van-cell-group>
                <van-cell-group inset style="min-height: 88px;">
                    <van-cell class="popup-cell" value="" is-link>
                        <template #title>
                            <div class="popup-cell-title-box">
                                <img src="/src/assets/svg/personnelUnlock.svg" alt="" width="16" height="16">
                                <span class="custom-title">只给谁看</span>
                            </div>
                        </template>
                    </van-cell>
                    <van-cell class="popup-cell" value="" @click="updatePostVisible(2)">
                        <template #title>
                            <div class="popup-cell-title-box">
                                <img src="/src/assets/svg/mutualAttention.svg" alt="" width="18" height="18">
                                <span class="custom-title">仅互关好友可见</span>
                            </div>
                        </template>
                        <template #right-icon>
                            <svg v-if="postInfo.privacy == 2" t="1755157923446" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9587" width="20" height="20">
                                <path d="M455.42 731.04c-8.85 0-17.75-3.05-24.99-9.27L235.14 553.91c-16.06-13.81-17.89-38.03-4.09-54.09 13.81-16.06 38.03-17.89 54.09-4.09l195.29 167.86c16.06 13.81 17.89 38.03 4.09 54.09-7.58 8.83-18.31 13.36-29.1 13.36z" p-id="9588" fill="#fb533e"></path><path d="M469.89 731.04c-8.51 0-17.07-2.82-24.18-8.6-16.43-13.37-18.92-37.53-5.55-53.96L734.1 307.11c13.37-16.44 37.53-18.92 53.96-5.55 16.43 13.37 18.92 37.53 5.55 53.96L499.67 716.89c-7.58 9.31-18.64 14.15-29.78 14.15z" 
                                    p-id="9589" fill="#fb533e">
                                </path>
                            </svg>
                        </template>
                    </van-cell>
                </van-cell-group>
                <van-cell-group inset style="min-height: 44px;">
                    <van-cell class="popup-cell" value="" @click="updatePostVisible(3)">
                        <template #title>
                            <div class="popup-cell-title-box">
                                <img src="/src/assets/svg/lock.svg" alt="" width="18" height="18">
                                <span class="custom-title">仅自己可见</span>
                            </div>
                        </template>
                        <template #right-icon>
                            <svg v-if="postInfo.privacy == 3" t="1755157923446" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9587" width="20" height="20">
                                <path d="M455.42 731.04c-8.85 0-17.75-3.05-24.99-9.27L235.14 553.91c-16.06-13.81-17.89-38.03-4.09-54.09 13.81-16.06 38.03-17.89 54.09-4.09l195.29 167.86c16.06 13.81 17.89 38.03 4.09 54.09-7.58 8.83-18.31 13.36-29.1 13.36z" p-id="9588" fill="#fb533e"></path><path d="M469.89 731.04c-8.51 0-17.07-2.82-24.18-8.6-16.43-13.37-18.92-37.53-5.55-53.96L734.1 307.11c13.37-16.44 37.53-18.92 53.96-5.55 16.43 13.37 18.92 37.53 5.55 53.96L499.67 716.89c-7.58 9.31-18.64 14.15-29.78 14.15z" 
                                    p-id="9589" fill="#fb533e">
                                </path>
                            </svg>
                        </template>
                    </van-cell>
                </van-cell-group>
            </div>
        </div>
    </van-popup>

    <!--对话框（确认是否删除帖子）-->
    <el-dialog v-model="dialogVisible_postDel" title="" width="500" center align-center>
        <div style="color: #61666D;font-size: 16px;font-weight: 600;margin-bottom: 12px;text-align: center;padding: 0 16px;">
            删除帖子
        </div>
        <div style="color: #61666D;font-size: 14px;text-align: center;padding: 0 16px 10px;white-space: pre-wrap;">
            确认删除帖子吗？
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible_postDel = false">取消</el-button>
                <el-button @click="delPost(postInfo.id)" v-loading.fullscreen.lock="fullscreenLoading" type="primary">确定</el-button>
            </div>
        </template>
    </el-dialog>

    <!--对话框（确认是否删除评论）-->
    <el-dialog v-model="dialogVisible_commentDel" title="" width="500" center align-center>
        <div style="color: #61666D;font-size: 16px;font-weight: 600;margin-bottom: 12px;text-align: center;padding: 0 16px;">
            删除评论
        </div>
        <div style="color: #61666D;font-size: 14px;text-align: center;padding: 0 16px 10px;white-space: pre-wrap;">
            删除评论后，评论下所有回复都会被删除,是否继续?
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible_commentDel = false">取消</el-button>
                <el-button @click="deleteComment(needToDelComment)" v-loading.fullscreen.lock="fullscreenLoading" type="primary">确定</el-button>
            </div>
        </template>
    </el-dialog>

</div>
</template>

<script lang="ts" setup>
import '@vant/touch-emulator'; // 在桌面端使用 Vant时，这个库会在桌面端自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用（Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备）
import { ref, onMounted, computed, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import api from '@/api/'
import { CommentConstant } from '@/constant/common.js'
import { formatNumber, formatDateTime, formatTime } from '@/utils/format.js'
import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style'; // showImagePreview是函数组件，要手动引入样式
import { CacheComponentStore } from '@/stores/cache/cacheComponentStore'
import { TagStore } from '@/stores/tagStore.js'
import { TipStore } from '@/stores/tipStore'
import { UserInfoStore } from '@/stores/userInfoStore'

const router = useRouter()
const route = useRoute()
const postId = route.query.id // 帖子id

const cache_Store = CacheComponentStore()
const tag_Store = TagStore()
const tip_Store = TipStore()
const user_Store = UserInfoStore()

const fullscreenLoading = ref(false) // 全屏加载标识
const postInfo = ref({}) as any
const userInfo = ref({}) as any

const tagsObjectList = ref([])
const topicObjectList = ref([])

const isShowPopup = ref(false) // 弹出框标识
const isShowPopup_permission = ref(false) // 弹出框标识--权限设置

// 移动端判断
const isMobile = computed(() =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
)

// 判断当前帖子作者是否是本人
const currentUserIsAuthor = computed(() => {
    // 未登录状态下默认为非本人
    if(!user_Store.userInfo?.id){
        return false
    }
    return postInfo.value.userId === user_Store.userInfo.id
})


// #region 关于图片
// const imageUrlList = ref([
//     "https://picsum.photos/400/300?1",
//     "https://picsum.photos/300/200?2",
//     "https://picsum.photos/400/300?3",
//     "https://picsum.photos/200/400?4",
//     "https://picsum.photos/400/300?5",
//     "https://picsum.photos/600/300?6",
//     "https://picsum.photos/400/300?7",
// ])

// 拖拽状态相关变量
const isDragging = ref(false)
const touchStartX = ref(0)
const touchStartY = ref(0)
const touchStartTime = ref(0)

// 处理触摸开始事件
const handleTouchStart = (event) => {
    if(isMobile.value){
        return
    }
    isDragging.value = false
    touchStartX.value = event.touches[0].clientX
    touchStartY.value = event.touches[0].clientY
    touchStartTime.value = Date.now()
    // console.log('开始触摸',`x坐标：${touchStartX.value}，y坐标：${touchStartY.value}，时间：${touchStartTime.value}`)
}

// 处理触摸结束事件
const handleTouchEnd = (event) => {
    if(isMobile.value){
        return
    }
    const touchEndX = event.changedTouches[0].clientX
    const touchEndY = event.changedTouches[0].clientY
    const touchEndTime = Date.now()
    
    // 计算触摸距离和时间
    const deltaX = Math.abs(touchEndX - touchStartX.value)
    const deltaY = Math.abs(touchEndY - touchStartY.value)
    const deltaTime = touchEndTime - touchStartTime.value
    // console.log('结束触摸',`x坐标变化：${deltaX}，y坐标变化：${deltaY}，时间经过：${deltaTime}`)
    
    // 如果光标的水平移动距离大于垂直移动距离，且移动距离超过10px，且时间间隔小于500ms，则认为是拖拽
    if (deltaX > deltaY && deltaX > 10 && deltaTime < 500) {
        isDragging.value = true
    }
}

// 处理图片点击事件
const handleImageClick = (imgList, imgIndex) => {
    if(isMobile.value){
        previewImg(imgList, imgIndex)
        return
    }

    // 如果是拖拽操作，不触发预览
    if (isDragging.value) {
        isDragging.value = false // 重置状态
        return
    }
    
    // 否则执行预览
    previewImg(imgList, imgIndex)
}

// 预览图片
function previewImg(imgList: string[], imgIndex: number){
    showImagePreview({
        images: imgList,
        startPosition: imgIndex, // 指定图片的初始位置
        closeable: true // 显示关闭按钮
    });
}
// #endregion



// #region 辅助函数
// 编辑操作
const handelEditClick = (pid)=>{
    router.push({
        name: 'Publish',
        state: { postId: pid }
    });
}

// 权限设置
const handelPermissionClick = ()=>{
    // 1.关闭编辑弹出框
    isShowPopup.value = false

    // 2.弹出权限设置弹出框
    isShowPopup_permission.value = true
}

// 切换回复列表显示/隐藏
const toggleReplies = (commentId) => {
    const comment = commentInfo.value.find(c => c.id === commentId)
    if (comment) {
        comment.showReplies = !comment.showReplies
        if(comment.repliesCount < 5){
            comment.isHasMoreReply = false
        }
    }
}

// 返回
function GoBack() {
    router.go(-1)
}

// 跳转用户个人页
function goUserProfile(uid){
    router.push({
        name: 'UserProfile',
        query: { uid: uid }
    });
}
// #endregion


// #region ------帖子操作相关开始------
const dialogVisible_postDel = ref(false)
const handelDelClick = async(pid)=>{
    alert("删除功能暂不开放~~") // 功能正常，但先禁用了，防止误操作
    // dialogVisible_postDel.value = true
}

// 删除帖子
const delPost = async(pid)=>{
    // 1.执行删除操作
    const res = await api.Post_Delete(pid)

    // 2.确认结果，提示操作是否成功
    if(res.data.code == 1){
        tip_Store.successTip("删除成功")
    }else{
        tip_Store.errorTip()
    }
    dialogVisible_postDel.value = false

    // 3.取消个人主页组件的挂载
    cache_Store.reload('Profile', 'index')

    // 4.返回
    router.go(-1)
}

// 修改帖子权限
const updatePostVisible = async(privacy_needToUpdate) => {
    if(postInfo.value.privacy == privacy_needToUpdate){
        return
    }

    const res = await api.Post_UpdateVisible(postInfo.value.id, privacy_needToUpdate)
    if(res.data.code == 1){
        tip_Store.successTip()
        postInfo.value.privacy = privacy_needToUpdate
        isShowPopup_permission.value = false
    }else{
        tip_Store.errorTip()
    }
}

// #endregion


// #region ------评论区相关开始------

// #region 常用数据定义
// 评论的层级（1代表顶层，2代表子评论）
enum commentLevel {
    level1 = 1,
    level2 = 2,
}
// 评论信息（新增评论用）
const commentAddDTO = ref({
    id: null,
    postId: postId,
    userId: user_Store.userInfo?.id,
    parentId: 0,
    parentUserId: null,
    level: 1,
    replyId: null,
    replyUserId: null,
    replyUsername: null,
    content: null,
    likesCount: null,
    repliesCount: null,
    status: null,
    createTime: null
})
const commentIds_userLike = ref([]) // 当前用户点赞了这篇帖子的哪些评论
const commentInfo = ref([]) // 评论信息（后端传来的数据，用于展示）
const totalCount_comment = ref(0) // 评论总数
const currentPage_comment = ref(1) // 当前评论页数
const size_comment = ref(10) // 每页展示评论数
const isHasMoreComment = ref(true) // 是否还有更多（顶级）评论
const commentSortType = ref(CommentConstant.SORT_DEFAULT) // 评论排序类型

const size_comment_reply = ref(5) // 每页展示子评论数
const inputPlaceholder = ref('') // 输入框提示语
const commentInput = ref(null) // 评论输入框DOM引用
const isInputFocused = ref(false) // 输入框是否聚焦
// #endregion


// #region 辅助方法
/**处理回复评论点击事件
 * @param data 要回复的评论
 * @param inputLevel 回复评论的层级
 * @param inputParentId 父级评论的id(若为顶级评论则为0)
 * @param inputReplyId 被回复的评论的id(仅在对楼中评论回复时才用填写)
 */
const handleClickReply = (data: any, inputLevel: number, InputParentId=0, inputReplyId=null)=>{
    inputPlaceholder.value = `回复 ${data.username} :`
    commentAddDTO.value.level = inputLevel // 设置层级
    commentAddDTO.value.parentId = InputParentId // 设置父级id
    commentAddDTO.value.parentUserId = data.userId // 设置父级的用户id
    commentAddDTO.value.replyId = inputReplyId // 设置回复的评论id（只有楼中子评论才要设置）
    commentAddDTO.value.replyUserId = data.userId
    commentAddDTO.value.replyUsername = data.username // 设置回复的评论id的用户名（同理，只有楼中子评论才要设置）
    
    // 自动聚焦到输入框
    nextTick(() => {
        commentInput.value?.focus()
    })
}

// 取消回复评论（重置参数）
const cancelReply = ()=>{ 
    inputPlaceholder.value = ''
    commentAddDTO.value.level = commentLevel.level1
    commentAddDTO.value.parentId = 0
    commentAddDTO.value.parentUserId = null
    commentAddDTO.value.replyId = null
    commentAddDTO.value.replyUserId = null
    commentAddDTO.value.replyUsername = null
    commentAddDTO.value.content = null

    isInputFocused.value = false // 取消聚焦输入框
}

// 切换评论排序
const toggleCommentSort = (type) => {
    if (commentSortType.value !== type) {
        commentSortType.value = type

        // 重置参数
        commentInfo.value = [] // 清空评论数据
        isHasMoreComment.value = true // 标识符重置，意为还有更多评论
        currentPage_comment.value = 1 // 重置当前页数

        getCommentData() // 重新获取评论数据
    }
}

// 在前端渲染自己发的评论
const renderCommentFromMyself = (c)=>{
    // 设置新评论的点赞状态为false（因为是自己刚发的）
    c.isLiked = false
    
    // 1.顶级评论
    if(c.parentId == 0 && c.level == commentLevel.level1){
        c.childrenComments = []
        setCommentExtraAttr(c) // 针对顶级评论，为其设置额外的属性
        commentInfo.value.unshift(c)
    }

    // 2.子评论
    else if(c.parentId != 0 && c.level == commentLevel.level2 && c.replyId == null){
        const parentComment = commentInfo.value.find(item=>item.id == c.parentId) // 找到对应的顶级评论
        parentComment.repliesCount += 1
        parentComment.childrenComments.unshift(c) // 添加子评论
    }

    // 3.回复评论
    else if(c.parentId != 0 && c.level == commentLevel.level2 && c.replyId != null){
        const parentComment = commentInfo.value.find(item=>item.id == c.parentId) // 找到对应的顶级评论
        parentComment.repliesCount += 1
        parentComment.childrenComments.push(c) // 添加回复评论
    }

    else{
        console.log(c.parentId, c.level, c.replyId)
        throw new Error('参数错误！')
    }
}

// 在前端移除自己发的评论
const removeCommentFromMyself = (c)=>{
    // 1.顶级评论
    if(c.parentId == 0 && c.level == commentLevel.level1){
        const index = commentInfo.value.findIndex(item => item.id == c.id);
        if (index === -1) throw new Error('评论不存在');
        commentInfo.value.splice(index, 1);
    }

    // 2.次级评论
    else if(c.parentId != 0 && c.level == commentLevel.level2){
        const parentComment = commentInfo.value.find(item=>item.id == c.parentId) // 找到对应的顶级评论
        if (!parentComment) throw new Error('父级评论不存在');

        const index = parentComment.childrenComments.findIndex(item => item.id == c.id);
        if (index === -1) throw new Error('子评论不存在');

        parentComment.childrenComments.splice(index, 1);
    }

    else{
        console.log(c.parentId, c.level)
        throw new Error('参数错误!')
    }
}

// 在前端中渲染某条评论已点赞
const renderCommentIsLiked = (c)=>{
    // 1.如果是顶级评论
    if(c.parentId == 0 && c.level == commentLevel.level1){
        const parentComment = commentInfo.value.find(item=>item.id == c.id) // 找到对应的顶级评论
        if (!parentComment) throw new Error('评论不存在');
        parentComment.isLiked = !parentComment.isLiked
        if(parentComment.isLiked == true){
            parentComment.likesCount += 1
        }else{
            parentComment.likesCount -= 1
        }
    }
    // 2.如果是子评论
    else if(c.parentId != 0 && c.level == commentLevel.level2){
        const parentComment = commentInfo.value.find(item=>item.id == c.parentId) // 找到对应的顶级评论
        if (!parentComment) throw new Error('父级评论不存在');

        const childComment = parentComment.childrenComments.find(item=>item.id == c.id) // 找到对应的子评论
        if (!childComment) throw new Error('子评论不存在');

        childComment.isLiked = !childComment.isLiked
        if(childComment.isLiked == true){
            childComment.likesCount += 1
        }else{
            childComment.likesCount -= 1
        }
    }
}

// 从评论列表中提取所有评论ID（包括父评论和子评论）
const getNewCommentIds = (cList)=>{
    let c_parentIds = cList.map(c => c.id)
    let c_childIds = cList.flatMap(c => c.childrenComments.map(c_child => c_child.id))

    return [...c_parentIds, ...c_childIds]
}

// 设置顶级评论的额外属性
const setCommentExtraAttr = (c)=>{ 
    c.showReplies = false // 1.显示与隐藏
    c.repliesPage = 1 // 2.当前子评论页数
    c.isHasMoreReply = true // 3.是否还有更多子评论
    c.isLoadingReply = false; // 4.是否正在加载子评论
    if(c.childrenComments != null && c.childrenComments.length > 0){
        c.childrenComments.forEach(c_comment => {
            if(c_comment.replyId !== null && c_comment.replyUsername == null){
                // 5.回复的用户名字字段
                c_comment.replyUsername = c.childrenComments.find(c => c.id == c_comment.replyId)?.username
            }
        })
    }
}

// 设置评论的额外属性--当前用户是否已经点赞
const setCommentExtraAttr_isLiked = (c)=>{
    c.isLiked = commentIds_userLike.value.includes(c.id)
    c.childrenComments.forEach(c_child => {
        c_child.isLiked = commentIds_userLike.value.includes(c_child.id)
    })
}
// #endregion


// #region 评论--增
// 发送评论（新增评论）
const isSendingComment = ref(false) // 是否正在发送评论
const sendComment = async()=>{
    // 1.判断是否登录，未登录无法评论
    if(!user_Store.userInfo.id){
        tip_Store.warningTip('请先登录')
        return
    }
    if(!commentAddDTO.value.content || commentAddDTO.value.content?.trim().length < 1){
        tip_Store.warningTip('不可发送空内容')
        return
    }

    isSendingComment.value = true
    // 2.发送请求
    try{
        const res = await api.Comment_Add(commentAddDTO.value)
        if(res.data.code == 1){
            const newComment = res.data.data
            renderCommentFromMyself(newComment) // 更新评论列表
            
            // 如果新增的是子评论，自动展开对应的顶级评论
            if(newComment.parentId != 0 && newComment.level == commentLevel.level2){
                const parentComment = commentInfo.value.find(c => c.id === newComment.parentId)
                if(parentComment && !parentComment.showReplies){
                    toggleReplies(newComment.parentId) // 展开对应的顶级评论
                }
            }
            
            // 清空AddDTO
            commentAddDTO.value = {
                id: null,
                postId: postId,
                userId: user_Store.userInfo?.id,
                parentId: 0,
                parentUserId: null,
                level: 1,
                replyId: null,
                replyUserId: null,
                replyUsername: null,
                content: null,
                likesCount: null,
                repliesCount: null,
                status: null,
                createTime: null
            }
            tip_Store.successTip()
        }else{
            tip_Store.errorTip('未知错误')
        }
    }catch(err){
        tip_Store.errorTip('网络繁忙')
    }finally{
        isSendingComment.value = false
    } 

}

// #endregion


// #region 评论--删
// 删除(自己的)评论
const deleteComment = async(data)=>{
    try{
        fullscreenLoading.value = true // 全局加载中，防止用户重复点击
        await api.Comment_Delete(data.id)
        removeCommentFromMyself(data) // 在前端移除评论
        tip_Store.successTip()
    }catch(err){
        tip_Store.errorTip()
        console.error("删除失败", err)
    }finally{
        dialogVisible_commentDel.value = false
        fullscreenLoading.value = false // 解除加载状态
    }
}

// #endregion


// #region 评论--查
const isLoadingCommentPart = ref(false) // 整个评论列表区域的加载状态
const isLoadingComment = ref(false) // 是否正在加载（顶级）评论
const isFirstLoadComment = ref(true) // 是否是第一次进入页面加载评论

// 加载更多
const load = ()=>{
    console.log("加载更多！")
    currentPage_comment.value += 1 // 下一页
    getCommentData()
}

// 获取评论信息
const getCommentData = async() => {
    if(currentPage_comment.value === 1){
        isLoadingCommentPart.value = true
        await new Promise(resolve => setTimeout(resolve, 300)) // 防止后端数据传输太快闪屏
    }

    let res = null
    try{
        isLoadingComment.value = true
        if (commentSortType.value === CommentConstant.SORT_LATEST){
            res = await api.Comment_GetByPostId(route.query.id, CommentConstant.SORT_LATEST, // 按最新排序
                                                currentPage_comment.value, size_comment.value,)
        }else{
            res = await api.Comment_GetByPostId(route.query.id, CommentConstant.SORT_DEFAULT, // 默认排序
                                                currentPage_comment.value, size_comment.value,) 
        }

        // 设置额外属性
        let newCList = res.data.data.list
        let newCIds = getNewCommentIds(newCList) // 从评论列表中提取所有评论ID（包括父评论和子评论）
        await getLikeCommentIds(newCIds)
        if (newCList && newCList.length > 0) {
            newCList.forEach(c => {
                setCommentExtraAttr(c) // 1.为顶级评论设置额外属性
                setCommentExtraAttr_isLiked(c) // 2.为新的顶级评论以及其下面的子评论,添加【是否已经点赞过】标识
            })
        }

        totalCount_comment.value = res.data.data.total
        commentInfo.value = [...commentInfo.value, ...newCList]
        if(res.data.data.list.length < size_comment.value){
            isHasMoreComment.value = false  // 没有更多（顶级）评论了
        }

    }finally{
        isLoadingCommentPart.value = false
        isLoadingComment.value = false
    }
}

// 获取更多子评论
const getMoreReplies = async(postId, parentId, c = 2, s = null) =>{
    const comment = commentInfo.value.find(c => c.id === parentId) // 1.从评论列表中找出这条评论
    comment.isLoadingReply = true // 标识正在加载子评论中
    try{
        const res = await api.Comment_GetReplies(postId, parentId, c, s) // 2.发送请求获取数据
        const list = res.data.data ?? []
        if(list.length < size_comment_reply.value){
            comment.isHasMoreReply = false // 没有更多子评论了
        }

        // 为每个子评论设置额外属性 -- 是否已点赞
        const newReplyIds = list.map(reply => reply.id)
        await getLikeCommentIds(newReplyIds)
        list.forEach(reply => {
            reply.isLiked = commentIds_userLike.value.includes(reply.id)
        })
        
        comment.childrenComments = [...comment.childrenComments, ...list] // 3.将返回的数据添加到该评论中的子评论列表中
        comment.repliesPage += 1 // 4.更新当前评论的回复的页数
    }catch(err){
        tip_Store.errorTip('加载失败')
    }finally{
        comment.isLoadingReply = false
    }
}
// #endregion


// #region 评论更多操作
const needToDelComment = ref(null)
const dialogVisible_commentDel = ref(false)
const handelClickDelComment = (data)=>{
    dialogVisible_commentDel.value = true // 1.打开确认删除弹窗
    needToDelComment.value = data // 2.记录要删除的评论
}

// #endregion

// #endregion ------评论区相关结束------



// #region 关于关注
const isFollowed = ref(false) // 是否关注了该帖子的作者

// 关注或取关
const followUser = async(fid, is_follow: boolean)=>{
    if(!user_Store.userInfo?.id){
        tip_Store.warningTip("请先登录")
        return
    }
    try{
        await api.Follow_follow(user_Store.userInfo.id, fid, is_follow)
        isFollowed.value = !isFollowed.value // 更新关注信息
    }catch(err){
        tip_Store.errorTip('网络繁忙')
    }
}

// #endregion


//#region 点赞与收藏
// 对帖子点赞
const likePost = async(pid)=>{
    if(!user_Store.userInfo?.id){
        tip_Store.warningTip("请先登录")
        return
    }
    await api.Post_like(pid).then((res) => {
        if(res.data.code == 1){
            postInfo.value.liked = !postInfo.value.liked
            if(postInfo.value.liked == true){
                postInfo.value.likesCount += 1
            }else{
                postInfo.value.likesCount -= 1
            }
        }
    });
}

// 收藏
const collectPost = async(pid)=>{
    if(!user_Store.userInfo?.id){
        tip_Store.warningTip("请先登录")
        return
    }
    await api.Post_collect(pid).then((res) => {
        if(res.data.code == 1){
            postInfo.value.collected = !postInfo.value.collected
            if(postInfo.value.collected == true){
                postInfo.value.favoriteCount += 1
            }else{
                postInfo.value.favoriteCount -= 1
            }
        }
    });
}

// 对评论点赞 
const likeComment = async(c)=>{
    if(!user_Store.userInfo?.id){
        tip_Store.warningTip("请先登录")
        return
    }
    await api.Comment_like(c.id, c.userId, !c.isLiked).then((res) => {
        if(res.data.code == 1){
            renderCommentIsLiked(c) // 在前端更新点赞状态
        }
    })
}

// 从评论id集合中，筛选出已点赞的评论id
const getLikeCommentIds = async(cIds) => {
    if(!cIds || cIds.length <= 0){ return }
    const res = await api.Comment_getLike(cIds)
    commentIds_userLike.value = [...commentIds_userLike.value, ...res.data.data]
}

//#endregion


// #region 获取数据
// 获取帖子信息
const getPostData = async(id) => { 
    let uid = user_Store.userInfo?.id ?? null
    try{
        await api.Post_GetById(id, uid).then((res) => { 
            postInfo.value = res.data.data
            userInfo.value = res.data.data.userInfo
        });
    }catch(err){
        if(!postInfo.value){
            // 帖子不存在，延迟后返回上一页
            setTimeout(()=>{
                router.back()
            }, 1500)
        }
    }
}

// 获取话题数据
const getTopicData = async() => {
    if(postInfo.value.topicIdList && postInfo.value.topicIdList.length > 0){
        api.Topic_GetByIds(postInfo.value.topicIdList).then((res)=>{
            topicObjectList.value = res.data.data
        })
    }
}


// 查看是否关注了该帖子的作者
const isFollow = async() => {
    if(!user_Store.userInfo?.id){ return } // 未登录
    if(currentUserIsAuthor.value){ return } // 帖子作者是本人
    if(userInfo.value.id && userInfo.value.id != -1){
        const res = await api.Follow_isFollow(user_Store.userInfo.id, postInfo.value.userId)
        isFollowed.value = res.data.data
    }
}
// #endregion


// #region 其他操作
// 记录浏览记录
const recordBrowse = async () => { 
    if(!user_Store.userInfo?.id){ return } // 未登录

    let readPostDTO = {
        postId: postInfo.value.id,
        tagIdList: postInfo.value?.tagIdList || [],
        topicIdList: postInfo.value?.topicIdList || []
    }

    await api.Post_Browse(readPostDTO)
}

// #endregion


onMounted(async() => {
    window.scrollTo(0, 0); // 每次跳转到详情页，自动滚动到最顶部

    // 获取帖子信息
    await getPostData(postId)

    // 从pinia仓库中获取标签信息
    tagsObjectList.value = tag_Store.tagList.filter(tag => postInfo.value.tagIdList.includes(tag.id))
    
    getTopicData() // 获取话题数据

    getCommentData() // 获取评论
        
    await isFollow(); // 查看是否已经关注了该用户
    isFirstLoadComment.value = false; // 标识已经不是第一次加载评论区
    
    recordBrowse() // 记录浏览记录

})


</script>

<style lang="scss" scoped>

/* #region 头部 */
.header {
    background: white;
    padding: 15px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.header-content {
    display: flex;
    align-items: center;
    gap: 15px;
}
.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    text-decoration: none;
    color: #333;
}
.header-title {
    font-size: 18px;
    font-weight: 500;
}
.header-actions {
    margin-left: auto;
    display: flex;
    gap: 15px;
}
.action-btn {
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    color: #666;
}
/* #endregion 头部结束 */


/* #region 内容区域 */
.main-content {
    margin-top: 70px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.post-detail {
    background: white;
    margin: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.post-header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}
.author-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}
.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff6b6b, #ffa500);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.author-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.author-details {
    flex: 1;
}
.author-name {
    font-weight: 500;
    margin-bottom: 4px;
}
.post-time {
    font-size: 12px;
    color: #999;
}
.follow-btn {
    padding: 6px 16px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
}
.follow-btn:hover {
    background: #ff8b8b;
}
.follow-btn.followed {
    background: #f0f0f0;
    color: #666;
    border: 1px solid #ddd;
}
.follow-btn.followed:hover {
    background: #e8e8e8;
}
.post-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 15px;
}

/* 轮播图样式 */
.post-swipe {
    height: 50vh;
    margin: 0;
}
.swipe-image {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
}

.post-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 20px 0;
}
.post-image {
    width: 100%;
    height: 250px;
    background: linear-gradient(45deg, #ff9a9e, #fecfef);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}
.post-content {
    padding: 20px 20px 20px;
}
.post-text {
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 14px;
}
/* 话题样式 */
.post-topics {
    margin-bottom: 20px;
}

.topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.topic {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}
.topic:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
}

/* 标签样式 */
.post-tags {
    margin-bottom: 20px;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    color: #d2691e;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(210, 105, 30, 0.2);
}
.tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(210, 105, 30, 0.3);
}
.post-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
.stats-left {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #666;
}
.action-buttons {
    display: flex;
    gap: 15px;
}
.action-btn-large {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: white;
    cursor: pointer;
    font-size: clamp(12px, 2vw, 14px);
    text-decoration: none;
    color: #666;
}
.action-btn-large.liked {
    color: #ff6b6b;
    border-color: #ff6b6b;
}
.action-btn-large.collected {
    color: #ffc107;
    border-color: #ffc107;
}
/* #endregion 内容区域结束 */


/* #region 评论区 */
.comments-section {
    background: white;
    margin: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.comments-header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-sort-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #999;
}

.sort-option {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.sort-option.active {
    color: #ff6b6b;
    font-weight: 500;
    background: rgba(255, 107, 107, 0.1);
}

.sort-option:hover:not(.active) {
    color: #666;
    background: rgba(0, 0, 0, 0.05);
}

.sort-divider {
    color: #ddd;
    font-size: 12px;
}
.comment {
    padding: 15px 20px;
    border-bottom: 1px solid #f8f8f8;
}
.comment:last-child {
    border-bottom: none;
}
.comment-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(45deg, #4facfe, #00f2fe);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.comment-name {
    font-weight: 500;
    font-size: 14px;
}
.comment-time {
    font-size: 12px;
    color: #999;
    margin-left: auto;
}
.comment-text {
    font-size: 14px;
    line-height: 1.5;
    margin-left: 42px;
    white-space: pre-wrap; // 保留文本中的空白字符（包括空格、制表符和换行符）
}
.comment-actions {
    margin-left: 42px;
    margin-top: 8px;
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #999;
}
.comment-action {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.comment-action.liked {
    color: #ff6b6b;
}

.comment-ellipsis{
    margin-left: auto;
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.comment-ellipsis:hover{
    border-radius: 999px;
    background-color: rgba(0,0,0,0.03);
}

/* #region 回复区域样式开始 */
.replies-section {
    margin-left: 42px;
    margin-top: 12px;
}

.reply {
    padding: 12px 0;
    border-bottom: 1px solid #f8f8f8;
}

.reply:last-child {
    border-bottom: none;
}

.reply-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.reply-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(45deg, #a8edea, #fed6e3);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.reply-name {
    font-weight: 500;
    font-size: 12px;
}

.reply-time {
    font-size: 11px;
    color: #999;
    margin-left: auto;
}

.reply-text {
    font-size: 13px;
    line-height: 1.4;
    margin-left: 32px;
}

.reply-to {
    color: #ff6b6b;
    font-weight: 500;
}

.reply-actions {
    margin-left: 32px;
    margin-top: 6px;
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #999;
}

.reply-action {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
}

.reply-action.liked {
    color: #ff6b6b;
}

.more-replies{
    margin-left: 70px;
    font-size: 12px;
    color: #999;
    cursor: pointer;
}
/* #endregion 回复区域样式结束 */

.bottom-bar{
    height: 70px;
}
.bottom-input {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #eee;
    padding: 15px 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.bottom-input.reply-mode {
    display: block;
}

.input-container {
    position: relative;
    width: 100%;
    border-radius: 20px;
}

.bottom-input.reply-mode .input-container {
    width: 100%;
    margin-bottom: 10px;
}
.button-container {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.bottom-input:not(.reply-mode) .button-container {
    display: none; /* 在正常状态（非回复模式）下，默认隐藏按钮容器 */
}

.reply-tag {
    line-height: 25px;
    position: absolute;
    top: -27px;
    left: 15px;
    font-size: 12px;
    color: #ff6b6b;
    background-color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 1;
}

.send-btn {
    padding: 8px 16px;
    background: #ff6b6b;
    font-size: 13px;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap; /* 防止文字换行 */
}
.cancel-btn {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 13px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap; /* 防止文字换行 */
}
.send-btn:hover {
    background: #ff8b8b;
}
.send-btn[disabled] {
  background: #f99898;
  cursor: not-allowed;
}
.cancel-btn:hover {
    background: #f5f5f5;
}
/* #endregion 评论区结束 */


/* #region 弹出框 */
.van-popup.van-popup--bottom {
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
}
.popup-content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.popup-btn{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}
.popup-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.popup-icon{
    width: 24px;
    height: 24px;
}
.popup-btn-text{
    position: absolute;
    font-size: 12px;
    color: #676767;
    bottom: -24px;
}
/* #endregion 弹出框结束 */


/* #region 权限设置弹出框 */
.popup-cell-box_permission {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100% - 50px);
    gap: 15px
}
.popup-cell {
    min-height: 44px;
    cursor: pointer;
}
.popup-cell-title-box {
    display: flex;
    align-items: center;
    gap: 10px
}

/* #endregion 权限设置弹出框结束 */


/* #region 覆盖样式 */
:deep(.van-swipe-item) {
    display: flex;
}
:deep(.comments-section .el-loading-spinner){
    top: 20%
}
:deep(.input-container .el-textarea__inner:focus){
    box-shadow: 0 0 0 1px #ff6b6b inset;
}
:deep(.input-container .el-textarea__inner){
    border-radius: 20px;
    border: none;
    background-color: rgba(0,0,0,0.03);
    padding: 8px 15px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
:deep(.input-container .el-textarea__inner::-webkit-scrollbar) {
    display: none; /* Chrome, Safari and Opera */
}
:deep(.el-textarea .el-input__count){
    background: rgba(0, 0, 0, 0);
}

/* #endregion 覆盖样式结束 */
</style>